<template>
	<view class="my-recharge" ref="uv-back-top">
		<uv-navbar v-if="!screen" title="充值" rightText=""
			@leftClick="navigateBack" :placeholder="true"></uv-navbar>
		<!-- customStyle="margin-bottom: 10px;width: 100%;overflow: auto;" -->
		<view class="content">
			<avatar v-if="!screen"></avatar>
			<uv-alert customStyle="margin-top: 10px;" :title="'会员到期: '+date" type="warning"></uv-alert>
			<!-- width: 100%; -->
			<view style="display: flex;justify-content:flex-start;margin-bottom: 10px;flex-wrap: wrap;"
				justify="between">
				<view class="item_sff" :style="screen?'width: 24%;':'width: 99%;'" v-for="(item,index) in vipData"
					:key="item.price" @click="clickMember(item)">
					<uv-text size="24" :text="item.name" align="center"></uv-text>
					<uv-text :text="'￥'+item.price" align="center"
						customStyle="color: #2979FF;font-weight:bold;"></uv-text>
					<view class="" style="color: #aa0000;display: flex;justify-content: center;">
						每月{{coin}}重置为：<view style="font-weight:bold;">
							{{item.points}}
						</view>
					</view>
					<view v-if="item.points" style="font-size: 13px;">
						不消耗完的{{coin}}就自动清零
					</view>
				</view>
			</view>

			<view class=""
				style="margin-bottom: 20px;color:#c1c1c1;font-size: 14px;;display: flex;justify-content: center;align-items: center;">
				支付即视为您同意
				<view @click="routed('/pages/my/protocol')" style="color:#2979FF;">《会员协议》</view>
				,充值会员24小时内到账
			</view>
			<view style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;">
				<view :style="screen?'width: 50%;':'width: 100%;'">
					<uv-text text="支付方式"></uv-text>
					<uv-radio-group v-model="radiovalue" placement="column">
						<uv-radio :customStyle="{margin: '8px'}" v-for="(item, index) in radiolist" :key="item.name"
							:label="item.name" :name="item.value" :disabled="item.disabled">
						</uv-radio>
					</uv-radio-group>
					<!-- <uv-button text="支付完成"></uv-button> -->
				</view>
				<view :style="screen?'width: 50%;':'width: 100%;'">
					<uv-image :src="'../../static/'+radiovalue+'.jpg'" mode="widthFix"></uv-image>
					<!-- <uv-image :src="'../../static/'+radiovalue+'/会员'+level+'.jpg'" mode="widthFix"></uv-image> -->
				</view>
			</view>

			<!-- <uv-divider text="VIP会员畅享特权" :dashed="true"></uv-divider>
			<uv-row customStyle="margin-bottom: 10px" justify="around">
				<uv-list v-for="(item,index) in tagsArray" :key="item[0].text">
					<uv-list-item v-for="(it,ind) in item" class="item_vip" :key="it.text">
						<uv-row justify="flex-start" customStyle="margin-bottom: 0px;padding:5px">
							<uv-image customStyle="margin-right:5px;" src="https://cdn.uviewui.com/uview/album/1.jpg"
								:lazy-load="true" radius="10px" width="45" height="45"></uv-image>
							<view class="">
								<uv-text text="无限AI对话"></uv-text>
								<uv-text text="3.5对话不限次数" customStyle="color:#A1A1A1;" size="12"></uv-text>
							</view>
						</uv-row>
					</uv-list-item>
				</uv-list>
			</uv-row> -->
		</view>
		<uv-back-top :scroll-top="scrollTop"></uv-back-top>
		<tabbars :prop-value="'my'"></tabbars>
	</view>
</template>

<script>
	// 引入
	import avatar from './tabBar/avatar';
	import tabbars from '@/components/tabbar/tabbar';
	import config from '@/common/config'
	import {
		pcpay,
		Alipay,
		getMember
	} from '@/common/api.js';
	export default {
		components: {
			// 注册组件
			tabbars,
			avatar
		},
		data() {
			return {
				scrollTop: 0,
				value: '',
				date: uni.$uv.date(new Date(), 'yyyy/mm/dd '),
				timeData: {},
				// 基本案列数据
				radiolist: [{
					name: '微信支付',
					value: 'wxpay',
					disabled: false
				}, {
					name: '支付宝支付',
					value: 'alipay',
					disabled: false
				}],
				// uv-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue: 'wxpay',
				level: 0,
				vipData: [],
				tagsList: [{
						text: '卡通动漫',
						checked: true
					},
					{
						text: '摄影写实',
						checked: false
					},
					{
						text: '主流国风',
						checked: false
					}, {
						text: '11',
						checked: false
					},
					{
						text: '22',
						checked: false
					},
					{
						text: '33',
						checked: false
					},
					{
						text: '11',
						checked: false
					},
					{
						text: '55',
						checked: false
					}
				],
			}
		},
		computed: {
			tagsArray() {
				const groups = [];
				let count = 0;
				const res = uni.$uv.sys();
				if (res.windowWidth < 768) {
					count = Math.ceil(this.tagsList.length / 2);
				} else if (res.windowWidth < 960) {
					count = Math.ceil(this.tagsList.length / 3);
				} else {
					count = Math.ceil(this.tagsList.length / 4);
				}
				// const count = this.screen ? this.tagsList.length / 4 : this.tagsList.length / 2;
				for (let i = 0; i < this.tagsList.length; i++) {
					this.tagsList[i]['index'] = i;
				}
				for (let i = 0; i < this.tagsList.length; i += count) {
					groups.push(this.tagsList.slice(i, i + count));
				}
				return groups;
			},
		},
		onLoad() {
			this.getMember();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			clickMember(e) {
				this.level = e.level
			},
			getMember() {
				var that = this;
				getMember({
					custom: {
						auth: true,
						catch: false,
					}
				}).then(e => {
					this.vipData = e;
				}).catch(e => {})
			},
			handlePay() {
				if (this.radiovalue == 'wxpay') {
					//微信支付
				} else if (this.radiovalue == 'alipay') {
					//支付宝支付
					this.callAliPay()
				}
			},
			callAliPay() {
				if (this.isPc) {
					// 支付宝支付功能可用
					Alipay({
						order_no: '订单号',
						total_amount: '支付金额',
						subject: '订单标题',
						body: '订单描述'
					}, {
						custom: {
							auth: true,
						},
					}).then(e => {
						// 进行支付请求
						console.log(e);
						uni.$uv.route({
							url: '/pages/webview/webview?url=' + encodeURIComponent(e.result),
							intercept(params, next) {
								uni.$uv.toast('跳转支付中。。。');
								// 模拟处理等待
								setTimeout(() => {
									// uni.hideLoading();
									next(true);
								}, 1000)
							}
						})
					}).catch(e => {
						console.log(e);
						// that.routes('chat/index');
					})
				} else {
					uni.getProvider({
						service: 'payment',
						success: function(res) {
							console.log(JSON.stringify(res));
							if (~res.provider.indexOf('alipay')) {
								// 支付宝支付功能可用
								pay({
									custom: {
										auth: false,
									},
									data: {
										order_no: '订单号',
										total_amount: '支付金额',
										subject: '订单标题',
										body: '订单描述'
									},
								}).then(e => {
									// 进行支付请求
									console.log(e);
									uni.requestPayment({
										provider: 'alipay',
										orderInfo: e,
										success: function(res) {
											console.log('支付成功');
										},
										fail: function(err) {
											console.log('支付失败', err);
										}
									})
								}).catch(e => {
									console.log(e);
									// that.routes('chat/index');
								})
							}
						},
						fail: function(err) {
							console.log(JSON.stringify(err));
							console.log('暂不支持支付宝支付');
						}
					})
				}
			},
			onChange(e) {
				this.timeData = e
			},
			left() {
				console.log('left');
			},
			right() {
				console.log('right');
			},
			routed(url) {
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						// console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-recharge {
		// width: calc(100% - 20px);
		width: 100%;

		.content {
			// width: 100%;
			padding: 10px;
		}

		.item_sff {
			height: auto;
			background: linear-gradient(to right, rgb(167, 168, 216), rgb(213, 213, 213));
			margin: 10px 2px 10px;
			padding: 10px 2px 20px;
			border-radius: 10px;
			text-align: center;

			.item_bottom {
				background-color: #ffaaff;
				width: 100%;
				text-align: center;
				height: 30px;
				margin-bottom: -10px;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}
		}

		.item_vip {
			width: 150px;
			height: 100px;
			background: linear-gradient(to right, rgb(249, 249, 249), rgb(222, 222, 222));
			margin-bottom: 20px;
			border-radius: 10px;
			text-align: center;

			.item_bottom {
				background-color: #ffaaff;
				width: 100%;
				text-align: center;
				height: 30px;
				margin-bottom: -10px;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}

		}
	}


	// 测试
	.demo-layout {
		height: 24px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>

</style>